import { initData, LrcListHTML } from './tool.js';

const LRC_DATA = initData(lrc);

const prog = {
  /** @type {HTMLAudioElement} */
  get audioElem() {
    return document.querySelector('audio');
  },
  /** @type {HTMLOListElement} */
  get lrcListElem() {
    return document.getElementById('lrc-list');
  },
};

function main() {
  prog.lrcListElem.innerHTML = LrcListHTML(LRC_DATA);
  prog.audioElem.addEventListener('timeupdate', () => {
    const lrcItem = R.findLast(R.compose( R.lt(R.__, prog.audioElem.currentTime), R.prop('time') ), LRC_DATA);
    Array.from(prog.lrcListElem.children).forEach(elem => elem.classList.remove('current'));
    if (!lrcItem) { return; }

    const liElem = prog.lrcListElem.querySelector(`[data-time="${lrcItem.time}"]`);
    liElem.classList.add('current');
    liElem.scrollIntoView({ block: 'center', behavior: 'smooth' });
  });
}

main();
